import React from 'react'
import PropTypes from 'prop-types';
import { Icon,InputItem,Button,Picker,List } from 'antd-mobile'
import CommonHeader from 'COMPONENT/CommonHeader';

import './index.less'
const PickerItem = List.Item;
// ========================================
class PublicFundsRent extends React.Component {
	static contextTypes = {
        router: PropTypes.object.isRequired
    }
	constructor(props) {
        super(props);
        
        const byStagesData = [
          	{value:'奉贤支行',label:'奉贤支行'},
          	{value:'闵行支行',label:'闵行支行'},
          	{value:'浦东支行',label:'浦东支行'},
          	{value:'张江支行',label:'张江支行'}      
        ]
        const outletsData = [
          	{value:'奉贤支行',label:'奉贤支行'},
          	{value:'闵行支行',label:'闵行支行'},
          	{value:'浦东支行',label:'浦东支行'},
          	{value:'张江支行',label:'张江支行'}
        ]
        this.state = {
    		btnActive:'1',
          	byStagesData: byStagesData,
          	outletsData: outletsData,
          	qishuChecked: byStagesData[0]['value'],
          	bankOutletsChecked: outletsData[0]['value'],
          	checkedVal:'',
          	infoData:{}
        }
    }    
	
	leftAction = () => {
		this.context.router.push({
			pathname: '/Home'
		})
	}
	
	onBanksChange = (val, data) => {
	    let colNum = 1;
	    const d = [...this.state.byStagesData];
    	const asyncValue = [...val];
	    this.setState({
	      data: d,
	      bankOutletsChecked: val,
	      cols: colNum,
	      asyncValue,
	    });
	};
	
	onMonthsChange = (val, data) => {
	    let colNum = 1;
	    const d = [...this.state.byStagesData];
    	const asyncValue = [...val];
	    this.setState({
	      data: d,
	      qishuChecked: val,
	      cols: colNum,
	      asyncValue,
	    });
	};
	
    render() {
    	let {btnActive,byStagesData,outletsData,qishuChecked, bankOutletsChecked} = this.state;
    	let _this = this;
        return (
            <div style={{
            	background:'#eee',
            	height:'100%',overflow:`auto`}} >
            	<CommonHeader 
					name= "租房申请"					
					leftContentTitle="@back"
					leftContent="上一页"
				/>
				<div style={{height:'.9rem'}}></div>
            	
            	<div  className="pdrentWrap">
            		<div className='commonDiv' >
				    	<label> 姓名 </label>
				    	<input placeholder='*红' style={{ background:`none` }}  />
				    </div>
				    <div className='commonDiv' >
				    	<label> 身份证号 </label>
				    	<input placeholder='42900*******7245' style={{ background:`none` }}  />
				    </div>
				    <div className='commonDiv' >
				    	<label> 学历 </label>
				    	<input placeholder='本科' style={{ background:`none` }}  />
				    </div>
				    <div className='commonDiv' >
				    	<label> 手机号 </label>
				    	<input placeholder='159*****897' style={{ background:`none` }}  />
				    </div>	
				    <div className='commonDiv' >
				    	<label> 父亲姓名 </label>
				    	<input placeholder='*军' style={{ background:`none` }}  />
				    </div>
				    <div className='commonDiv' >
				    	<label> 身份证号 </label>
				    	<input placeholder='42900*******7335' style={{ background:`none` }}  />
				    </div>
				    <div className='commonDiv' >
				    	<label> 母亲姓名 </label>
				    	<input placeholder='*兰' style={{ background:`none` }}  />
				    </div>
				    <div className='commonDiv' >
				    	<label> 身份证号 </label>
				    	<input placeholder='42900*******7875' style={{ background:`none` }}  />
				    </div>
				    

				    
				    <div className='commonDiv' style={{ marginTop:`20px`,justifyContent:`flex-start` }} >
				    	<label>婚姻关系</label>
				    	<input type='radio' name='radio' value='0' style={{ marginLeft:`20px` }} /><p>未婚</p>
				    	<input type='radio' name='radio'  value='1' checked style={{ marginLeft:`20px` }} /><p>已婚</p>
				    </div>
				    <div className='commonDiv' style={{ marginTop:`20px` }} >
				    	<label> 配偶姓名 </label>
				    	<input placeholder='*伟' />
				    </div>
				    <div className='commonDiv' >
				    	<label> 配偶身份证号 </label>
				    	<input placeholder='42900*******6075' />
				    </div>
				    <div style={{
			    	    padding: '.3rem',
					    background: '#fff',
					    margin: '.3rem 0',
					    fontSize: '.3rem'
				    }}>附件</div>
				    <div style={{
				    	padding:'.3rem',
				    	position:'relative'
				    }}>
				    	<input type="file" style={{
				    		opacity:'0',
				    		width:'2rem',height:'2rem',
				    		position:'absolute',
				    		top:'0',
				    		left:'0',
				    		zIndex:'99'
				    		
				    	}}/>
				    	
				    	<div style={{
				    		width:'2rem',height:'2rem',border:'1px solid #ccc',
				    		display:'flex',
				    		fontSize:'1.5rem',
				    		color:'#999',
				    		justifyContent: 'center',
    						alignItems: 'center',
				    		zIndex:'9'
    						
				    	}}>＋</div>

				    </div>
				    
				    <div className="btnGroup-two">

				    	<Button type="primary" inline className="btnGroup-two-btn" onClick={() => {
				    		
				    		_this.context.router.push({
						    	pathname: '/RentHouse'
						    })
				    		
				    	}}>提交</Button>
				    	<Button type="primary" inline className="btnGroup-two-btn" onClick={() => {
				    		
				    		_this.context.router.push({
						    	pathname: '/RentHouse'
						    })
				    		
				    	}}>退出</Button>

				    
				    </div>
			   	</div>
            </div>
            
            

        );
    }
}
// ========================================
export default PublicFundsRent;